<template>
  <div class="left-one">
    <!-- 标题 -->
    <div class="title-box">
      <div class="title-text">人口统计</div>
      <div class="title-btn">
        <div
          class="title-btn-item"
          :class="activeBtn(index)"
          v-for="(item, index) of titleBtnList"
          @click="changeTongji(index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="title-line"></div>
      <div class="title-line2"></div>
    </div>
    <!-- 内容 -->
    <div class="content-box">
      <el-table :data="tableData[activeIndex]" style="width: 100%; height: 90%">
        <el-table-column
          prop="name"
          label="小区名称"
          width="100"
          align="center"
        />
        <el-table-column prop="number" label="数量" width="60" align="center" />
        <el-table-column prop="address" label="地址" align="center" />
      </el-table>
    </div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      tableData: [
        [
          {
            name: "坦克小区",
            number: 3400,
            address: "坦克大街123号",
          },
          {
            name: "迪迦小区",
            number: 4750,
            address: "迪迦路666号",
          },
          {
            name: "参与者小区",
            number: 6240,
            address: "不参与街道456号",
          },
          {
            name: "不知名小区",
            number: 9800,
            address: "A街道B区999号",
          },
          {
            name: "大小区",
            number: 5410,
            address: "B街道A区888号",
          },
          {
            name: "A小区",
            number: 4260,
            address: "A街道C区777号",
          },
        ],
        [
          {
            name: "吃人厂区",
            number: 8000,
            address: "小吃街2号",
          },
        ],
        [
          {
            name: "娱乐学校",
            number: 4200,
            address: "快乐街道789号",
          },
        ],
        [
          {
            name: "奥特曼产业园",
            number: 180,
            address: "M78星云",
          },
        ],
        [
          {
            name: "帽子屋",
            number: 450,
            address: "帽子大街555号",
          },
        ],
      ],
      titleBtnList: [
        {
          title: "小区",
          index: 1,
        },
        {
          title: "厂区",
          index: 2,
        },
        {
          title: "学校",
          index: 3,
        },
        {
          title: "产业园",
          index: 4,
        },
        {
          title: "机关",
          index: 5,
        },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    changeTongji(index) {
      this.activeIndex = index;
    },
    // active按钮
    activeBtn(index) {
      return index == this.activeIndex ? "title-btn-item-active" : "";
    },
  },
  mounted() {},
};
</script>
  
  <style scoped>
.title-box {
  position: relative;
  padding: 0.8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  color: #fff;
  user-select: none;
  background-color: rgba(58, 64, 79, 0.8);
}

.title-text {
}
.title-btn {
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
}

.title-btn-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  font-size: 12px;
  border-top: 1px solid rgba(0, 236, 253, 0.86);
  border-bottom: 1px solid rgba(0, 236, 253, 0.86);
  border-left: 1px solid rgba(0, 236, 253, 0.86);
}

.title-btn-item-active {
  background-color: rgba(0, 236, 253, 0.86);
  color:#4b00ff;
}

.title-btn-item:nth-child(5) {
  border-right: 1px solid rgba(0, 236, 253, 0.86);
}

.content-box {
  padding: 0.5vw;
  height: 37.5vh;
  color: #fff;
  overflow: hidden;
}
</style>
<style >
.content-box th {
  background: rgba(5, 44, 58, 1) !important;
  color: #fff;
}

.content-box td {
  background: rgba(5, 44, 58, 0.8) !important;
  color: #fff;
}

.content-box .curPointer {
  cursor: pointer;
}

.content-box .el-scrollbar__wrap--hidden-default {
  background-color: rgba(5, 44, 58, 0.8) !important;
}
</style>